<template>
  <div class="bg-grey">
    <div class="flex-middle-center font-xl bg-white py-2">
      <i :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</i>
      <small class="text-grey mx-5">VS</small>
      <i :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></i>
    </div>

    <div class="d-flex m-3" :class="{sg: m.hafu.isBetOne}">
      <small class="yield bg-purple br-l">半全场</small>
      <div class="d-flex flex-wrap flex-grow">
        <div class="g box box-md bg-white" :class="on('bqc|' + k)" @click="select('bqc|' + k)" v-for="(v, k) in results">
          <div>{{k}}</div>
          <small>{{v}}</small>
        </div>
      </div>
    </div>

    <div class="d-flex" @click="$emit('hide')">
      <a class="btn btn-lg btn-secondary grow b-no rad-0">取消</a>
      <a class="btn btn-lg btn-danger grow b-no rad-0">确定</a>
    </div>

  </div>
</template>

<script>
import { mixin } from './calculator'

function wel (v) {
  return v.replace(/h/g, '胜')
    .replace(/d/g, '平')
    .replace(/a/g, '负')
}

export default {
  name: 'popup-bqc',
  mixins: [mixin],
  computed: {
    results () {
      var {hafu} = this.m
      var obj = {}
      Object.keys(hafu).sort().reverse().map(k => {
        if (k == 'isBetOne') {
          return
        }
        obj[wel(k)] = hafu[k]
      })
      return obj
    }
  }
}
</script>
